<template>
  <el-tabs
    type="border-card"
    style="margin: 0 20px; height: 93vh"
    @tab-click="tabChange"
    v-model="$store.state.activeName3"
  >
    <el-tab-pane label="单点变形分析" name="单点变形分析">
      <el-form inline :model="form">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            v-model="form.startTime"
            default-time="00:00:00"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            size="mini"
            v-model="form.endTime"
            default-time="00:00:00"
            :picker-options="endTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="统计时间类型">
          <el-select v-model="form.timeType" size="mini">
            <el-option label="每24小时" value="24"></el-option>
            <el-option label="每12小时" value="12"></el-option>
            <el-option label="每6小时" value="6"></el-option>
            <el-option label="每2小时" value="2"></el-option>
            <el-option label="每1小时" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="search(1)">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            size="mini"
            @click="exportExcel('#tab', '单点变形分析')"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="tableData" stripe id="tab" v-loading="loading">
        <el-table-column
          prop="label"
          label="监测站点"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="dataL"
          label="经度(°)"
          align="center"
          width="115"
        ></el-table-column>
        <el-table-column
          prop="dataB"
          label="纬度(°)"
          align="center"
          width="115"
        ></el-table-column>
        <el-table-column
          prop="dataH1"
          label="WGS84-H(m)"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="dataGx"
          label="WGS84-x(m)"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="dataGy"
          label="WGS84-y(m)"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="dataH2"
          label="WGS84-ΔH(mm)"
          align="center"
          width="135"
        ></el-table-column>
        <el-table-column
          prop="dataGp"
          label="WGS84-ΔP(mm)"
          align="center"
          width="135"
        ></el-table-column>
        <el-table-column
          prop="dataGxs"
          label="WGS84-Δx(mm)"
          align="center"
          width="135"
        ></el-table-column>
        <el-table-column
          prop="dataGys"
          label="WGS84-Δy(mm)"
          align="center"
          width="135"
        ></el-table-column>
        <el-table-column
          prop="azimuth"
          label="方位角"
          align="center"
          width="85"
        ></el-table-column>
        <el-table-column
          prop="dataCount"
          label="统计数量"
          align="center"
          width="85"
        ></el-table-column>
        <el-table-column
          prop="theDate"
          label="统计时间"
          align="center"
        ></el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-col :span="10">
          <el-pagination
            background
            :current-page="pageData.currentPage"
            layout="total, prev, pager, next, jumper"
            :total="pageData.count"
            :page-size="pageData.pageSize"
            @current-change="handleCurrentChange"
            v-if="pageData.count != 0"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="变形速率分析" name="变形速率分析">
      <el-form inline :model="form2">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            v-model="form2.startTime"
            default-time="00:00:00"
            :picker-options="startTimePicker2"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            size="mini"
            v-model="form2.endTime"
            default-time="00:00:00"
            :picker-options="endTimePicker2"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="统计时间类型">
          <el-select v-model="form2.timeType" size="mini">
            <el-option label="每24小时" value="24"></el-option>
            <el-option label="每12小时" value="12"></el-option>
            <el-option label="每6小时" value="6"></el-option>
            <el-option label="每2小时" value="2"></el-option>
            <el-option label="每1小时" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="search2(1)"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            size="mini"
            @click="exportExcel('#tab2', '变形速率分析')"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="tableData2" stripe id="tab2" v-loading="loading2">
        <el-table-column
          prop="label"
          label="监测站点"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dataL"
          label="经度(°)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dataB"
          label="纬度(°)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ghSpeed"
          label="WGS84-Vh(mm/24h)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gxSpeed"
          label="WGS84-Vx(mm/24h)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gySpeed"
          label="WGS84-Vy(mm/24h)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dataCount"
          label="统计数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="theDate"
          label="统计时间"
          align="center"
        ></el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-col :span="10">
          <el-pagination
            background
            :current-page="pageData2.currentPage"
            layout="total, prev, pager, next, jumper"
            :total="pageData2.count"
            :page-size="pageData2.pageSize"
            @current-change="handleCurrentChange2"
            v-if="pageData2.count != 0"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="静态数据分析检验" name="静态数据分析检验">
      <el-form inline :model="form3">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            v-model="form3.startTime"
            default-time="00:00:00"
            :picker-options="startTimePicker3"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            size="mini"
            v-model="form3.endTime"
            default-time="00:00:00"
            :picker-options="endTimePicker3"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="search3(1)"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            size="mini"
            @click="exportExcel('#tab3', '静态数据分析检验')"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="tableData3" stripe id="tab3" v-loading="loading3">
        <el-table-column
          label="监测站点"
          align="center"
          prop="label"
          width="80"
        ></el-table-column>
        <el-table-column
          label="WGS84-ΔH(mm)"
          align="center"
          prop="dataH"
          width="135"
        ></el-table-column>
        <el-table-column
          label="WGS84-Δx(mm)"
          align="center"
          prop="dataGx"
          width="135"
        ></el-table-column>
        <el-table-column
          label="WGS84-Δy(mm)"
          align="center"
          prop="dataGy"
          width="135"
        ></el-table-column>
        <el-table-column
          label="std_x(mm)"
          align="center"
          prop="stdx"
        ></el-table-column>
        <el-table-column
          label="std_y(mm)"
          align="center"
          prop="stdy"
        ></el-table-column>
        <el-table-column
          label="std_h(mm)"
          align="center"
          prop="stdh"
        ></el-table-column>
        <el-table-column
          label="std_l(mm)"
          align="center"
          prop="stdl"
        ></el-table-column>
        <el-table-column
          label="完整率（%）"
          align="center"
          prop="integrityRate"
        ></el-table-column>
        <el-table-column
          label="有效观测率（%）"
          align="center"
          prop="effectiveObservationRate"
          width="135"
        ></el-table-column>
        <el-table-column
          label="MP1(m)"
          align="center"
          prop="mP1"
        ></el-table-column>
        <el-table-column
          label="MP2(m)"
          align="center"
          prop="mP2"
        ></el-table-column>
        <el-table-column
          label="观测值/周跳"
          align="center"
          prop="oSlps"
        ></el-table-column>
        <el-table-column
          label="统计时间"
          align="center"
          prop="theTime"
        ></el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-col :span="10">
          <el-pagination
            background
            :current-page="pageData3.currentPage"
            layout="total, prev, pager, next, jumper"
            :total="pageData3.count"
            :page-size="pageData3.pageSize"
            @current-change="handleCurrentChange3"
            v-if="pageData3.count != 0"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "BeiDou",
  props: {
    node: Object,
  },
  data() {
    return {
      form: {
        timeType: "24",
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      form2: {
        timeType: "24",
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
      },
      tableData2: null,
      pageData2: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      form3: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
      },
      tableData3: null,
      pageData3: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      loading: null,
      loading2: null,
      loading3: null,
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() < new Date(this.form.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
    startTimePicker2() {
      return {
        disabledDate: (time) =>
          this.form2.startTime
            ? time.getTime() < new Date(this.form2.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form2.endTime).getTime()
            : false,
      };
    },
    endTimePicker2() {
      return {
        disabledDate: (time) =>
          this.form2.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form2.startTime).getTime()
            : false,
      };
    },
    startTimePicker3() {
      return {
        disabledDate: (time) =>
          this.form3.startTime
            ? time.getTime() < new Date(this.form3.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form3.endTime).getTime()
            : false,
      };
    },
    endTimePicker3() {
      return {
        disabledDate: (time) =>
          this.form3.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form3.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    tabChange(tab) {
      this.$store.dispatch("getTabName3", tab.paneName);
    },
    singlePoint(list, firstDto) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].label = this.node.label;
        list[i].dataL = Number(list[i].dataL).toFixed(8);
        list[i].dataB = Number(list[i].dataB).toFixed(8);
        list[i].dataH1 = list[i].dataH.toFixed(4);
        list[i].dataGx = list[i].dataGx.toFixed(4);
        list[i].dataGy = list[i].dataGy.toFixed(4);
        list[i].dataH2 = ((list[i].dataH - firstDto.dataH) * 1000).toFixed(1);
        list[i].dataGp = (list[i].dataGp * 1000).toFixed(1);
        list[i].dataGxs = ((list[i].dataGx - firstDto.dataGx) * 1000).toFixed(
          1
        );
        list[i].dataGys = ((list[i].dataGy - firstDto.dataGy) * 1000).toFixed(
          1
        );
        list[i].azimuth = list[i].azimuth.toFixed(1);
        list[i].theDate = moment(list[i].theDate).format("YYYY-MM-DD HH:mm:ss");
      }
      this.tableData = list;
    },
    search(currentPage) {
      this.loading = true;
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
        timeType: this.form.timeType,
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":${currentPage},\\"pageSize\\":10},\\"timeType\\":\\"${queryData.timeType}\\"}","serviceCode":"queryBeiDouHistory","timestamp":"","uuid":""}`,
      }).then((res) => {
        console.log(res)
        this.loading = false;
        this.pageData = res.data.parameter.page;
        let list = res.data.parameter.list,
          firstDto = res.data.parameter.firstDto;
        this.singlePoint(list, firstDto);
      });
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    deformationRate(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].label = this.node.label;
        list[i].dataL = Number(list[i].dataL).toFixed(8);
        list[i].dataB = Number(list[i].dataB).toFixed(8);
        list[i].ghSpeed = (list[i].ghSpeed * 1000).toFixed(1);
        list[i].gxSpeed = (list[i].gxSpeed * 1000).toFixed(1);
        list[i].gySpeed = (list[i].gySpeed * 1000).toFixed(1);
        list[i].theDate = moment(list[i].theDate).format("YYYY-MM-DD HH:mm:ss");
      }
      this.tableData2 = list;
    },
    search2(currentPage) {
      this.loading2 = true;
      let queryData = {
        startTime: moment(this.form2.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form2.endTime).format("YYYY-MM-DD"),
        timeType: this.form2.timeType,
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":${currentPage},\\"pageSize\\":10},\\"timeType\\":\\"${queryData.timeType}\\"}","serviceCode":"queryBeiDouHistory","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading2 = false;
        this.pageData2 = res.data.parameter.page;
        let list = res.data.parameter.list;
        this.deformationRate(list);
      });
    },
    handleCurrentChange2(val) {
      this.search2(val);
    },
    staticData(list, firstDmo) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].label = this.node.label;
        list[i].dataH = ((list[i].dataH - firstDmo.dataH) * 1000).toFixed(1);
        list[i].dataGx = ((list[i].dataGx - firstDmo.dataGx) * 1000).toFixed(1);
        list[i].dataGy = ((list[i].dataGy - firstDmo.dataGy) * 1000).toFixed(1);
        list[i].stdx = list[i].stdx.toFixed(1);
        list[i].stdy = list[i].stdy.toFixed(1);
        list[i].stdh = list[i].stdh.toFixed(1);
        list[i].stdl = list[i].stdl.toFixed(1);
        list[i].theDate = moment(list[i].theDate).format("YYYY-MM-DD HH:mm:ss");
      }
      this.tableData3 = list;
    },
    search3(currentPage) {
      this.loading3 = true;
      let queryData = {
        startTime: moment(this.form2.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form2.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":${currentPage},\\"pageSize\\":10},\\"timeType\\":\\"0\\"}","serviceCode":"queryBeiDouStaticQuality","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading3 = false;
        this.pageData3 = res.data.parameter.page;
        let list = res.data.parameter.list,
          firstDmo = res.data.parameter.firstDmo;
        this.staticData(list, firstDmo);
      });
    },
    handleCurrentChange3(val) {
      this.search3(val);
    },
    exportExcel(dom, title) {
      /* out-table关联导出的dom节点  */
      var wb = XLSX.utils.table_to_book(document.querySelector(dom));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${this.node.label}${title}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
  created() {
    let fun = () => {
      this.loading = true;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"timeType\\":\\"24\\",\\"dataType\\":\\"01\\"}","serviceCode":"queryInitStartTime","timestamp":"","uuid":""}`,
      }).then((res) => {
        let startTime = res.data.parameter.startTime;
        this.form.startTime = moment(startTime).format("YYYY-MM-DD 00:00:00");
        this.form.startTimeMin = this.form.startTime;
        let queryData = {
          startTime: startTime,
          endTime: moment().format("YYYY-MM-DD"),
        };
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":1,\\"pageSize\\":10},\\"timeType\\":\\"24\\"}","serviceCode":"queryBeiDouHistory","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.loading = false;
          this.pageData = res.data.parameter.page;
          let list = res.data.parameter.list,
            firstDto = res.data.parameter.firstDto;
          this.singlePoint(list, firstDto);
        });
      });
    };
    let fun2 = () => {
      this.loading2 = true;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"timeType\\":\\"24\\",\\"dataType\\":\\"01\\"}","serviceCode":"queryInitStartTime","timestamp":"","uuid":""}`,
      }).then((res) => {
        let startTime = res.data.parameter.startTime;
        this.form2.startTime = moment(startTime).format("YYYY-MM-DD 00:00:00");
        this.form2.startTimeMin = this.form2.startTime;
        let queryData = {
          startTime: startTime,
          endTime: moment().format("YYYY-MM-DD"),
        };
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":1,\\"pageSize\\":10},\\"timeType\\":\\"24\\"}","serviceCode":"queryBeiDouHistory","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.loading2 = false;
          this.pageData2 = res.data.parameter.page;
          let list = res.data.parameter.list;
          this.deformationRate(list);
        });
      });
    };
    let fun3 = () => {
      this.loading3 = true;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"timeType\\":\\"24\\",\\"dataType\\":\\"01\\"}","serviceCode":"queryInitStartTime","timestamp":"","uuid":""}`,
      }).then((res) => {
        let startTime = res.data.parameter.startTime;
        this.form3.startTime = moment(startTime).format("YYYY-MM-DD 00:00:00");
        this.form3.startTimeMin = this.form3.startTime;
        let queryData = {
          startTime: startTime,
          endTime: moment().format("YYYY-MM-DD"),
        };
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":1,\\"pageSize\\":10},\\"timeType\\":\\"0\\"}","serviceCode":"queryBeiDouStaticQuality","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.loading3 = false;
          this.pageData3 = res.data.parameter.page;
          let list = res.data.parameter.list,
            firstDmo = res.data.parameter.firstDmo;
          this.staticData(list, firstDmo);
        });
      });
    };
    let DataStatistics = async () => {
      await fun();
      await fun2();
      await fun3();
    };
    DataStatistics();
  },
};
</script>